<script>
	import { getContext } from 'svelte';
	import { fly } from 'svelte/transition';

	const close = getContext('chatToggle');
</script>

<div class="sidebar" on:click|stopPropagation transition:fly={{ x: -50, duration: 100 }}>
	<div class="top">
		<button class="close" on:click={close}>
			<i class="gi-reply" />
		</button>
	</div>
	<div class="nav-item">
		<a href="#chat" class="link active" on:click|preventDefault>
			<span>
				<i class="gi-team" />
				<!-- WishSimulator.App -->
			</span>
		</a>
	</div>
</div>

<style>
	.sidebar {
		max-width: 220px;
		width: 15%;
		min-width: 170px;
		height: 100%;
		display: block;
		background-color: rgba(32, 36, 49, 0.6);
		border-right: 1px solid rgba(210, 198, 156, 0.6);
		border-left: 1px solid rgba(210, 198, 156, 0.6);
		color: #d2c69c;
		position: relative;
	}

	@media screen and (max-width: 454px) {
		.sidebar {
			display: none;
		}
	}

	.top {
		width: 100%;
		height: 60px;
		background-color: #3b4255;
		padding: 0 20px 10px;
		display: flex;
		align-items: flex-end;
	}
	:global(.mobile) .top {
		height: 40px;
		padding: 0 20px 0px;
		margin-bottom: -10px;
	}

	.gi-reply {
		font-size: x-large;
	}

	:global(.mobile) .gi-reply {
		font-size: large;
	}

	.nav-item {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		color: #f0e4d4;
	}

	.link {
		position: relative;
		transition: all 0.2s;
		text-decoration: none;
		color: #f0e4d4;
		aspect-ratio: 70/17.5;
		display: flex;
		align-items: center;
		padding-left: 5%;
		z-index: 1;
	}

	@media screen and (min-width: 900px) {
		.link {
			font-size: 80%;
		}
	}

	.link i {
		font-size: 1.3rem;
		display: inline-block;
		margin-right: 10px;
		opacity: 0.8;
	}
	:global(.mobile) .link i {
		font-size: 1.4rem;
	}

	.link.active,
	.link:hover {
		background-color: #414856;
		border-radius: 0.25rem;
	}

	.link::after,
	.link::before,
	span::after,
	span::before {
		content: '';
		position: absolute;
		background-size: contain;
		display: block;
	}

	.link.active::before {
		top: 50%;
		right: -3%;
		height: 100%;
		aspect-ratio: 1/1;
		transform: translateY(-50%) rotate(180deg);
		z-index: -1;
		line-height: 120%;
		background-color: #414856;
		border-radius: 100%;
	}

	.link.active::after {
		top: 50%;
		right: -1%;
		width: 100%;
		aspect-ratio: 708/156;
		transform: translateY(-50%) rotate(180deg);
		background-image: url('');
		background-repeat: no-repeat;
		opacity: 0.5;
	}

	span {
		display: flex;
		align-items: center;
		width: 100%;
		height: 95%;
		position: relative;
		overflow: hidden;
	}
	span :global(i) {
		line-height: 0;
	}
</style>
